<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<title>青岛地图+OpenStreetMap建筑白模</title>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
  html,
  body,
  #cesiumContainer {
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
  }
</style>
</head>

<body>
<div id="cesiumContainer"></div>

<script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>

<script>
const viewer = new Cesium.Viewer("cesiumContainer", {
    terrainProvider: Cesium.createWorldTerrain({requestWaterMask : true, requestVertexNormals : true}),
});
viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(120.375, 36.150, 50*1000),
    orientation: {
        heading : Cesium.Math.toRadians(0),
        pitch : Cesium.Math.toRadians(-90),
        roll : Cesium.Math.toRadians(0)
    },
});
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.0;
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
    /* 青岛市左下角：经度，纬度 */
    120.00, 36.00,
    /* 青岛市右上角：经度，纬度 */
    120.75, 36.50
);

// OpenStreetMap建筑白模
const buildingColor = Cesium.Color.CYAN.withAlpha(0.8);
viewer.scene.primitives.add(Cesium.createOsmBuildings({defaultColor: buildingColor}));
</script>

</body>
</html>